<template>
  <!-- 渠道项 -->
  <el-radio-group :value="$attrs.value[0]" class="channel-setting d-flex flex-column" @input="handleChange">
    <template v-for="category in channelData">
      <!-- 自有平台 -->
      <el-tooltip
        v-if="!category.list"
        :key="category.channelCode"
        :disabled="!showToolTip(category)"
        effect="dark"
        content="当前场景已存在相同渠道作品"
        placement="top"
      >
        <el-radio :label="category.channelCode" :disabled="getDisabled(category)" class="mx-0" border>
          <div class="d-flex al-center"><i class="icon" :class="category.icon"></i>{{ category.name }}</div>
        </el-radio>
      </el-tooltip>
      <!-- 拓展渠道 -->
      <el-dropdown
        v-else
        :key="category.id"
        class="channel-list-dropdown mb-24"
        trigger="click"
        @visible-change="onVisibleChange"
      >
        <div class="dropdown-toggle d-flex jc-between al-center lh-1 px-24 py-16">
          <div class="d-flex al-center"><i class="icon" :class="category.icon"></i>{{ category.name }}</div>
          <i class="el-icon-arrow-down" :class="dropdownIn ? 'dropdown-in' : 't-light'"></i>
        </div>
        <el-dropdown-menu slot="dropdown" class="channel-list-dropdown-menu">
          <!-- <el-radio-group :value="$attrs.value"> -->
          <el-tooltip
            v-for="channel in category.list"
            :key="channel.channelCode"
            :disabled="!showToolTip(channel)"
            effect="dark"
            content="当前场景已存在相同渠道作品"
            placement="top"
          >
            <el-radio :label="channel.channelCode" :disabled="getDisabled(channel)" class="m-0 px-24">
              <div class="d-flex al-center"><i class="icon mr-8" :class="channel.icon"></i>{{ channel.name }}</div>
            </el-radio>
          </el-tooltip>
          <!-- </el-radio-group> -->
        </el-dropdown-menu>
      </el-dropdown>
    </template>
  </el-radio-group>
</template>

<script>
  import { EXTRA_CHANNEL_LIST } from '@/constants';
  import { notEmptyRules } from '@/utils';
  export default {
    props: { channelList: { type: Array, default: () => [] } },
    data() {
      return {
        notEmptyRules,
        EXTRA_CHANNEL_LIST,
        channelData: [],
        dialogType: '',
        dropdownIn: false,
        showBusinessConsultant: false
      };
    },
    computed: {
      workStatus() {
        return this.getWorkStatus();
      },
      sceneChannelList() {
        return this.getSceneChannelList();
      }
    },

    inject: {
      getWorkStatus: { from: 'getWorkStatus' },
      getSceneChannelList: { from: 'getSceneChannelList', default: () => () => undefined },
      classifyId: { default: '' },
      isH5: 'isH5'
    },
    mounted() {},
    methods: {
      getDisabled(channel) {
        if (this.workStatus === 1) return true;
        // if (channel.type === 16) return false;
        return this.sceneChannelList?.includes(channel.channelCode);
      },
      showToolTip(channel) {
        if (this.workStatus === 1) return false;
        // if (channel.type === 16) return false;
        return this.sceneChannelList?.includes(channel.channelCode);
      },
      // 下拉多选
      onVisibleChange(visible) {
        this.dropdownIn = visible;
      },
      handleChange(value) {
        const isNotOpened = (channel) => channel.channelCode === value && !channel.opened;
        this.channelData.some((item) => isNotOpened(item) || item.list?.some((item) => isNotOpened(item)))
          ? (this.showBusinessConsultant = true)
          : this.$emit('input', [value]);
      }
    }
  };
</script>

<style lang="scss" scoped>
  // 公共
  .icon {
    margin-right: 8px;
    width: 24px;
    height: 24px;
  }

  .channel-setting,
  .channel-list-dropdown-menu {
    width: 18.5vw;
    min-width: 313px;
    max-width: 360px;

    ::v-deep .el-radio {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;

      .el-radio__input {
        order: 1;
      }

      .el-radio__label {
        order: 0;
        padding: 0;
      }
    }
  }

  .channel-setting ::v-deep {
    .el-radio {
      padding: 16px 24px;
      background-color: #fff;

      &:not(:last-of-type) {
        margin-bottom: 16px;
      }
    }
  }

  .dropdown-toggle {
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 56px;
    background-color: #fff;
  }

  .channel-list-dropdown-menu {
    margin: 4px 0;
    padding: 0;

    ::v-deep {
      .el-radio-group {
        // display: flex;
        // flex-direction: column;

        .el-radio {
          &:hover {
            color: map-get($colors, 'theme');
            background-color: #f4f9ff;
          }

          .icon {
            width: 40px;
            height: 24px;
          }
        }
      }

      .popper__arrow {
        display: none;
      }
    }
  }
</style>
